<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				display: flex;
				width: 100%;
				height: 100vh;
			}
			.wrapper{
				width: 100%;
				height: 100%;
				background: #000;
			}
			.el{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -80px;
				width: 2px;
				height: 80px;
				background: #fff;
				transform-style: 50% 100%;
				transform: translateY(-50px);
			}
			
		</style>
	</head>
	<body>
		<div class="wrapper">
			
		</div>
		<script src="lib/anime.min.js"></script>
		<script type="text/javascript">
			let wrapper = document.querySelector('.wrapper')
			// 节点数量
			let num = 90;
			// 运动持续时间
			let duration = 6000;
			// 延迟时间
			let delay = duration/num;
			// 创建anime时间轴动画
			let t1 = anime.timeline({
				duration:delay,
				complete:function(){
					t1.restart();
					console.log('完成了')
				}
			})
			// 1.创建元素
			function createEl(i){
					// 旋转角度
					let rotate = i*360/num;
					let translateY = -100;
					let hue = Math.round(360 / num * i);
					var el = document.createElement('div')
					el.style.backgroundColor = 'hsl(' + hue + ', 40%, 60%)';
					el.className="el";
					el.style.transform = 'rotate('+rotate+'deg) translateY('+translateY+'px)';
					t1.add({
						begin:function(){
							anime({
								targets:el,
								rotate:[rotate+'deg',rotate+10+'deg'],
								backgroundColor:['hsl(' + hue + ', 40%, 60%)','hsl(' + hue + ', 20%, 60%)'],
								scale: [1, 1.25],
								translateY:[translateY+'px',translateY+10+'px'],
								easing: 'easeInOutSine',
								direction: 'alternate',
								duration: duration * .1
							})
						}
					})
					wrapper.appendChild(el)
				}
			
			
			for(let i=0;i<num;i++){
				createEl(i)
			}
		</script>
	</body>
</html>
